<template><div class="relative w-fit min-w-40 inline-block">
  <button type="button" @click="active = !active" ref="button" class="w-full flex items-center">
    <span class="w-full text-left">{{ drop.find(v => v.id == model)?.name }}</span>
    <i class="fa-solid fa-triangle text-[10px] transition-transform"></i>
  </button>
  <Transition>
  <div v-if="active" class="list fixed flex flex-col shadow-lg mt-1">
    <button v-for="v in drop" @click="model = v.id" type="button">{{ v.name }}</button>
  </div>
  </Transition>
</div></template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue';
defineProps<{
  drop: { id: any, name: any }[],
}>();
const active = ref(false);
const button = ref<HTMLElement>();
const model = defineModel();

function close(e: MouseEvent) {
  if ((button.value)?.contains(e.target as Node)) return;
  active.value = false;
}
onMounted(() => document.addEventListener('click', close));
onBeforeUnmount(() => document.removeEventListener('click', close));
</script>

<style lang="scss" scoped>
button:hover i {
  @apply rotate-180;
}
.list {
  @apply bg-[var(--solid-block-color)] border border-solid border-[var(--split-color)] max-h-64;
  @apply overflow-auto rounded-lg min-w-40 w-max z-10;
  button {
    @apply text-left rounded-none h-[27px];
  }
}
</style>